{extend name="public/base"/}
{block name="css"}
    <link href="{$Think.STATIC_PATH}css/jsgame.css" rel="stylesheet"/>
{/block}

{block name="center_left"}
    <div id="navsecond" class="float-left">
        <div id="shelflist">
            <div class="title">
                <div class="float-left title-icon">
                    <i class="iconfont blog-game"></i>
                </div>
                <div class="float-left title-text">
                    <span>游戏</span>
                </div>
                <div class="clear"></div>
            </div>

            <div class="innerUl">
                <ul class="menuUl">
                    <li id="retrosnaker" data-width="500" data-height="410">
                        <i class="iconfont blog-game add-operate"></i>
                        <span>Retro Snaker</span>
                    </li>
                    <li id="fruitninja" data-width="640" data-height="520">
                        <i class="iconfont blog-game add-operate"></i>
                        <span>Fruit Ninja</span>
                    </li>
                    <li id="flybird" data-width="400" data-height="480">
                        <i class="iconfont blog-game add-operate"></i>
                        <span>Fly Bird</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
{/block}

{block name="center_main"}
<div id="maincontent" class="float-right">
    <iframe name="iframename" src="{$Think.STATIC_PATH}/game/retrosnaker/index.html" width="500" height="410" scrolling="no" frameborder="0"></iframe>
</div>
{/block}

{block name="footer_js"}
<script src="{$Think.STATIC_PATH}js/jquery.min.js"></script>
<script type="text/javascript">
    $('#navsecond .innerUl').on('click', 'li', function () {
        $('iframe').attr('src', '{$Think.STATIC_PATH}/game/'+ $(this).attr('id') +'/index.html');
        $('iframe').attr('width', $(this).attr('data-width'));
        $('iframe').attr('height', $(this).attr('data-height'));
    })
</script>
{/block}